<template>
    <div class="content"
        :style="{ 'top': data.data[currentIndex].top + '%', 'left': data.data[currentIndex].left + '%' }">
        <div class="box"
            :style="{ 'width': data.data[currentIndex].size + 'px', 'height': data.data[currentIndex].size + 'px', 'background-color': data.data[currentIndex].bgcolor }">
        </div>
        <div style="color: aliceblue;font-size: 12px;" :style="{ 'color': data.data[currentIndex].fontColor }" >分享码：******</div> 
    </div>
</template>

<script>
export default {
    name: "poster",
    props: {
        data: {
            type: Object,
            default: () => { }
        },
        currentIndex: {
            type: [String, Number],
            default: 0
        }

    },
    data() {
        return {
            input3: "",
        };
    },
    created() {
        console.log(this.data, "input3input3input3")
        console.log(this.currentIndex, "currentIndex")
    },
    methods: {

    }
}
</script>

<style lang="scss" scoped>
.content {
    display: flex;
    padding: 5px 10px;
    position: absolute;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    border-radius: 10px;
    .box {
        width: 100px;
        height: 100px;
        background-color: #fff;
        background-image: url('https://pili-vod.guanxikeji.com/hongyunshangcheng/img/1744968330629.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

}
</style>
